<template>
	<div class="">
		<el-upload class="upload-demo" :action="action" :on-preview="handlePictureCardPreview" :headers="headers"
			:on-remove="handleRemove" list-type="picture-card" multiple :on-success="handleAvatarSuccess"
			:limit="datas.limit" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" :file-list="fileList">
			<!-- <el-button size="small" type="primary">选择上传文件</el-button> -->
			<i class="el-icon-plus"></i>
			<div slot="tip" class="el-upload__tip">{{ datas.tip }}</div>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
// import {
// 	URL_IP_HOST,
// 	URL_PREFIX
// } from '@/util/constant.js'
export default {
	props: ["data"],
	data() {

		return {
			imageUrl: '',
			datas: {},
			headers: {},
			action: process.env.BASE_URL + "application/oss/upload",
			dialogImageUrl: '',
			dialogVisible: false,
			fileList: []
		};
	},
	watch: {
		data: {
			handler: function (newValue) {
				this.datas = newValue
				this.fileUrl(newValue.urls)
			},
			deep: true,
			immediate: true
		}
	},
	created() {
		// this.datas = this.data
		// this.fileUrl(this.datas.urls)
		// // this.action=URL_IP_HOST+"/resource/oss/upload"
		console.log("地址", this.action);
	},
	mounted() {
		this.info()
	},
	methods: {
		info() {
			var userInfoData_ = JSON.parse(sessionStorage.getItem('userInfoData_web'))
			this.headers = {
				"Authorization": `Bearer ${userInfoData_ ? userInfoData_.access_token : ""}`,
				"clientid": userInfoData_ ? userInfoData_.client_id : "eeb9377d4b6debbc0a6e8756bbbbb4c7"
			}
		},
		handleRemove(file, fileList) {
			console.log("删除列表文件：", file, fileList);
			this.fileList = fileList
			this.$emit('uploadImageClick', { ossIds: this.fileUrls(this.fileList), urls: this.fileList })
		},
		removeDuplicates(array, property) {
			return array.filter((value, index, self) => {
				return self.some(item => item === value) ? false : true;
			});
		},
		handleExceed(res, file) {
			this.$message({
				message: `最多上传${this.datas.limit}个文件`,
				type: 'warning',
			});
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		beforeAvatarUpload(rawFile) {
			console.log("图片上传格式：", rawFile);
			if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png') {
				this.$message({
					message: '图片格式有误! 仅支持jpg、jpeg、png格式!',
					type: 'error',
				});
				return false
			} else if (rawFile.size / 1024 / 1024 > 2) {
				this.$message({
					message: '图片大小不超过2MB!',
					type: 'error',
				});
				return false
			}
		},
		handleAvatarSuccess(res, file) {
			file.url = file.response.data.url
			file.ossId = file.response.data.ossId
			this.fileList.push(file)
			console.log("图片上传成功：", res, this.fileList);
			this.$emit('uploadImageClick', { ossIds: this.fileUrls(this.fileList), urls: this.fileList })
		},
		fileUrl(data) {
			for (let i = 0; i < data.length; i++) {
				let res = {
					data: {
						ossId: data[i].ossId
					}
				}
				data[i].response = res
				this.fileList.push(data[i])
			}
		},
		fileUrls(data) {
			let array = ""
			for (let index = 0; index < data.length; index++) {
				if (index == 0) {
					array = data[index].response.data.ossId
				} else {
					array = array + "," + data[index].response.data.ossId
				}
			}
			return array

		}
	}
}
</script>
<style lang="scss">
::v-deep .avatar-uploader {
	.el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 90px;
	height: 90px;
	line-height: 90px;
	text-align: center;
}

.avatar {
	width: 90px;
	height: 90px;
	display: block;
}
</style>
